<template>
  <div class="shop-item">
    <!-- 头部区域 -->
    <header class="header">
      <van-image class="header-img" fit="cover" :src="img" />
      <div class="header-warp" @click="shopDetail">
        <span class="header-demo">{{ address.name }}</span
        ><br />
        <span
          >{{ address.delivery_mode && address.delivery_mode.text }} /
          {{ address.category }} /
          {{
            address.piecewise_agent_fee && address.piecewise_agent_fee.tips
          }}</span
        ><br />
        <span>公告:{{ address.promotion_info }}</span>
      </div>
      <van-icon name="arrow" class="arrow" />
    </header>

    <!-- 宫格区域 -->
    <van-tabs title-active-color="#3190e8">
      <van-tab title="商品" class="right">
        <van-sidebar v-model="activeKey" @change="onChange">
          <van-sidebar-item
            :title="item.name"
            v-for="item in sidebarList"
            :key="item.id"
          />
        </van-sidebar>
        <van-list class="right-list">
          <div v-for="(sidebar, index) in sidebarList" :key="sidebar.id">
            <div class="sellList">
              {{ sidebar.name }}
              <span class="sell">{{ sidebar.description }}</span>
            </div>
            <div
              class="main"
              v-for="food in getComputedList(index)"
              :key="food.id"
            >
              <van-image fit="cover" class="food-img" :src="img" />
              <div class="food">
                <div class="foodname">{{ food.title }}</div>
                <div class="description">{{ food.description }}</div>
                <div class="foodtips">{{ food.tips }}</div>
                <div class="tag">e1</div>
                <div class="foodprice">
                  ￥<span class="num">20</span> <span class="since">起</span>
                </div>
                <div class="sign" v-if="food.__v" @click="pay_jian(food)">
                  -
                </div>
                <div class="food-num" v-if="food.__v">{{ food.__v }}</div>
                <div class="cross" @click="pay(food)">+</div>
              </div>
            </div>
          </div>
        </van-list>
      </van-tab>

      <van-tab title="评价">
        <shopEvaluation></shopEvaluation>
      </van-tab>
    </van-tabs>
    <div class="shop-car">
      <div class="shop" @click="showPop">
        <div class="shop-car-item">
          <van-icon class="icon-car" name="shopping-cart-o" />
          <div :class="{ 'pop-num': showNum }">{{ showNum ? num : '' }}</div>
        </div>
        <div class="shop-price">
          <div class="price-moeny">￥{{ price }}.00</div>
          <div class="distribution">配送费￥5</div>
        </div>
      </div>
      <div class="buy" :style="{ backgroundColor: color }" v-if="buy">
        还差￥20起送
      </div>
      <div class="buy" :style="{ backgroundColor: color }" v-else @click="aa()">
        去下单
      </div>
    </div>

    <!-- 弹出层 -->
    <!-- <van-cell is-link @click="showPopup">展示弹出层</van-cell> -->
    <van-popup
      v-model="show"
      closeable
      position="bottom"
      :style="{ height: '30%' }"
    >
      <div class="pop-top">
        <span class="pop-car">购物车</span>
        <div @click="closeBtn">
          <van-icon name="delete" />
          <span class="pop-del">清空</span>
        </div>
      </div>
      <van-list>
        <div class="pop-main" v-for="(food, index) in list" :key="food.id">
          <span>{{ food.title }}</span>
          <div class="pop-moeny">
            <span>$20</span>
            <div class="sign" v-if="food.__v" @click="pay_jian(food, index)">
              -
            </div>
            <div class="food-num" v-if="food.__v">{{ food.__v }}</div>
            <div class="cross" @click="pay(food)">+</div>
          </div>
        </div>
      </van-list>
    </van-popup>
  </div>
</template>

<script>
// console.log(document.querySelector('.van-list'));

import img from '@/assets/images/dalongmao.jpg'
import shopEvaluation from '@/components/shop-evaluation'
export default {
  name: 'shopItem',
  components: {
    shopEvaluation,
  },
  props: {
    foodList: {
      type: Array,
      required: true,
    },
    sidebarList: {
      type: Array,
      required: true,
    },
    address: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      img: img,
      activeKey: 0,
      price: 0,
      buy: true,
      color: '#535356',
      index: null,
      show: false,
      list: [],
      num: 0,
      id: this.$route.params.id,
    }
  },
  updated() {
    document.querySelector('.van-list').addEventListener('scroll', () => {
      //  console.log(document.querySelector('.van-list').scrollTop);
      //  console.log(this.index);
      this.activeKey = Math.floor(
        document.querySelector('.van-list').scrollTop / 601
      )
    })
  },
  computed: {
    showNum() {
      return this.num !== 0
    },
  },
  methods: {
    shopDetail() {
      this.$router.push('/shopDetail')
    },
    getComputedList(index) {
      return this.foodList.slice(index * 5, (index + 1) * 5)
    },
    pay(obj) {
      if (this.list.indexOf(obj) == -1) {
        this.list.push(obj)
      }
      obj.__v++
      this.num++
      this.price += 20
      this.buy = false
      this.color = '#4cd964'
    },
    pay_jian(obj, index) {
      obj.__v--
      this.num--
      if (obj.__v === 0) {
        this.list.splice(index, 1)
      }
      this.price -= 20
      if (this.list.length === 0) {
        this.show = false
        this.buy = '还差￥20起送'
        this.color = '#535356'
      }
    },
    onChange(index) {
      document.querySelector('.van-list').scrollTop = index * 601
      this.index = index
      // document.documentElement.scrollTop = (index + 1) * 100 * 5 + 51
    },
    showPop() {
      this.show = true
    },
    closeBtn() {
      this.foodList.forEach((item) => (item.__v = 0))
      this.list = []
      if (this.list.length === 0) {
        this.show = false
        this.num = 0
        this.price = 0
        this.buy = true
        // obj.__v = 0
        this.color = '#535356'
      }
    },
    aa() {
      this.$router.push(`/confirmOrder?id=${this.id}`)
      var KEY = 'KEY_LIST'
      sessionStorage.setItem(KEY, JSON.stringify(this.list))
    },
  },
}
</script>

<style lang='less' scoped>
.shop-item {
  margin-bottom: 47px;
  background-color: #fff;
  .header {
    height: 90px;
    background-color: rgba(119, 103, 137, 0.43);
    display: flex;
    .header-img {
      width: 68px;
      height: 70px;
      padding: 10px;
    }
    .header-warp .header-demo {
      display: inline-block;
      font-size: 13px;
      padding: 10px 0 0 0;
    }
    .header-warp span {
      display: inline-block;
      font-size: 12px;
      margin-bottom: 5px;
      color: #fff;
    }
    .arrow {
      position: absolute;
      right: 10px;
      top: 30px;
      font-size: 18px;
      color: #fff;
    }
  }
  .right {
    display: flex;
    .van-sidebar-item {
      border: 1px solid #ededed;
    }
    .right-list {
      flex: 1;
      height: 80vh;
      overflow-y: auto;
      .sellList {
        height: 50px;
        background-color: #f5f5f5;
        line-height: 50px;
        padding-left: 10px;
        color: #666;
        font-weight: 700;
        border-bottom: 1px solid #ccc;
        .sell {
          font-size: 12px;
          padding-left: 10px;
          color: #999;
          font-weight: normal;
        }
        .ok {
          width: 100%;
          height: 30px;
          background-color: pink;
        }
      }
      .main {
        display: flex;
        height: 100px;
        margin-top: 10px;
        .food-img {
          width: 100px;
          height: 100px;
        }
        .food {
          width: 113px;
          position: relative;
          .foodname {
            font-size: 16px;
            font-weight: 700;
            margin: 0 0 5px 5px;
          }
          .description {
            font-size: 12px;
            color: #666;
            margin: 0 0 5px 5px;
          }
          .foodtips {
            font-size: 12px;
            margin: 0 0 5px 5px;
          }
          .tag {
            font-size: 12px;
            width: 20px;
            text-align: center;
            color: rgb(241, 136, 79);
            border-radius: 30%;
            border: 1px solid rgb(241, 136, 79);
            margin: 0 0 5px 5px;
          }
          .foodprice {
            font-size: 12px;
            margin-left: 5px;
            color: rgb(241, 136, 79);
            .num {
              font-size: 16px;
              font-weight: 700;
            }
            .since {
              color: #666;
            }
          }
          .sign {
            position: absolute;
            right: -18px;
            bottom: -1px;
            width: 20px;
            height: 20px;
            line-height: 18px;
            text-align: center;
            border-radius: 50%;
            font-size: 20px;
            border: 1px solid #3190e8;
          }
          .food-num {
            position: absolute;
            right: -35px;
            bottom: 0px;
          }
          .cross {
            position: absolute;
            right: -65px;
            bottom: 0;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            border-radius: 50%;
            background-color: #3190e8;
          }
        }
      }
    }
  }
  .shop-car {
    position: fixed;
    display: flex;
    bottom: 0;
    width: 100%;
    height: 47px;
    z-index: 9999;
    background-color: #3d3d3f;
    .shop {
      flex: 1;
      .shop-car-item {
        position: absolute;
        bottom: 0;
        left: 18px;
        border-radius: 50%;
        border: 2px solid #555;
        width: 55px;
        height: 55px;
        background-color: #3d3d3f;
        .icon-car {
          position: absolute;
          left: 7px;
          bottom: 9px;
          color: #fff;
          font-size: 40px;
        }
        .pop-num {
          position: absolute;
          top: -8px;
          left: 36px;
          width: 15px;
          height: 20px;
          border-radius: 50%;
          background-color: red;
          color: #fff;
          font-size: 12px;
          text-align: center;
          line-height: 20px;
        }
      }
      .shop-price {
        position: absolute;
        left: 100px;
        color: #fff;
        .price-moeny {
          font-size: 22px;
          font-weight: 700;
        }
        .distribution {
          font-size: 12px;
          margin-left: 5px;
        }
      }
    }
    .buy {
      // position: absolute;
      // right: 0;
      width: 117px;
      height: 100%;
      line-height: 47px;
      font-weight: 700;
      font-size: 16px;
      text-align: center;
      color: #fff;
    }
  }
  // /deep/.van-overlay {
  //     position: absolute;
  //     bottom: 0 !important;
  //     // top: 100%;
  //     left: 0;
  //     height: 30%;
  //     background-color: #fff;
  // }
  .pop-top {
    display: flex;
    justify-content: space-between;
    line-height: 45px;
    padding: 0 30px;
    height: 45px;
    background-color: #f5f5f5;
    .pop-car {
      font-weight: 700;
      font-size: 18px;
      color: #666;
    }
    .pop-del {
      font-size: 14px;
      color: #666;
    }
  }
  .pop-main {
    display: flex;
    justify-content: space-between;
    height: 5vh;
    margin-top: 10px;
    overflow-y: auto;
    .pop-moeny {
      display: flex;
      // margin-right: 10px;
    }
    .sign {
      width: 20px;
      height: 20px;
      line-height: 18px;
      text-align: center;
      border-radius: 50%;
      font-size: 20px;
      margin: -2px 10px 0 20px;
      border: 1px solid #3190e8;
    }
    .food-num {
      margin: 1px 10px 0 0;
    }
    .cross {
      width: 20px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      border-radius: 50%;
      margin-top: -1px;
      background-color: #3190e8;
    }
  }
  /deep/.van-tabs__wrap {
    border-bottom: 1px solid #ebebeb;
  }
  /deep/.van-tabs__line {
    background-color: #3190e8;
    width: 25px;
    margin-bottom: 7px;
  }
  .van-sidebar-item--select::before {
    height: 60px;
    width: 3px;
    background-color: #3190e8 !important;
  }
}
</style>